<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

<head>
<th:block th:replace="fragments/head" />
<link rel="stylesheet" type="text/css" href="/theme/vendor/plugins/ztree/css/zTreeStyle.css" />
</head>

<body class="sb-l-o">
	<!--/* 公共代码 */-->
	<div th:replace="fragments/common"></div>
	
	<!--/* 主题设置面板 */-->
	<div th:replace="fragments/skin-toolbox"></div>

	<!-- BEGIN: 主页面 -->
	<div id="main">
		<!--/* 顶部导航 */-->
		<header th:replace="fragments/header-banner"></header>
		<!--/* 左侧功能菜单导航 */-->
		<aside th:replace="fragments/aside"></aside>
		<!-- BEGIN: Content-Wrapper -->
		<section id="content_wrapper">
			<!--/* 模块路径导航条 */-->
			<header th:replace="fragments/header-breadcrumb"></header>

			<!-- Begin: 业务办理区 -->
			<section id="content" class="table-layout animated fadeIn">

				<!-- begin: .tray-left -->
				<aside class="tray tray-left tray320 pt25">
					<div class="panel">
						<div class="panel-heading">
							<span class="panel-title">组织机构部门导航</span>

							<div class="widget-menu pull-right">
								<div class="btn-group">
									<button class="btn btn-xs btn-default btn-gradient" id="btn-t-expand" title="展开/收缩">
										<i class="fa fa-expand p3"></i>
									</button>
									<button class="btn btn-xs btn-default btn-gradient" id="btn-t-refresh" title="刷新">
										<i class="fa fa-refresh p3"></i>
									</button>
								</div>
							</div>

						</div>
						<div class="panel-body p5">
							<ul id="tree" class="ztree"></ul>
						</div>
					</div>

				</aside>
				<!-- end: .tray-left -->


				<!-- begin: .tray-center -->
				<div class="tray tray-center">

					<div class="row">
						<div class="col-md-12">
							<div class="panel panel-visible">
								<div class="panel-heading">
									<div class="input-group widget-menu pull-left w250">
										<input type="text" id="in-name" class="form-control" placeholder="按部门名称搜索..." />
										<span class="input-group-btn">
											<button id="btn-query" class="btn btn-default btn-gradient btn-sm">
												<span class="glyphicon glyphicon-search"></span>
											</button>
										</span>
									</div>
									<!-- /input-group -->
									<div class="widget-menu pull-right mr5">
										<div class="btn-group">
											<button id="btn-new" class="btn btn-default btn-gradient btn-sm">
												<span class="fa fa-plus mr3"></span>新增
											</button>
											<button id="btn-refresh" class="btn btn-default btn-gradient btn-sm">
												<span class="fa fa-refresh mr3"></span>刷新
											</button>
										</div>
									</div>
								</div>
								<div class="panel-body pn">
									<table id="dt-org" class="table my table-hover ">
										<thead>
											<tr>
												<th>编号</th>
												<th>部门名称</th>
												<th>上级部门</th>
												<th>类型</th>
												<th>扩展码</th>
												<th></th>
											</tr>
										</thead>
										<tbody>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>

					<!-- 修复左右两栏布局时的bug  breaks used to extend container to demonstrate fixed scrolling capability  -->
					<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
					<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
					<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />

					<!-- 新增窗口 -->
					<div class="modal fade" id="w-new" tabindex="-1" data-backdrop="static">
						<div class="modal-dialog w650">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-label="Close">
										<span aria-hidden="true">&times;</span>
									</button>
									<h3 class="modal-title">新增部门</h3>
								</div>
								<div class="modal-body">
									<form id="fo-new" class="form-horizontal">
										<div class="form-group">
											<label class="col-md-2 control-label required">上级部门：</label>
											<div class="col-md-10 field">
												<input class="form-control" type="text" name="parent_name" readonly="readonly" />
											</div>
											<input type="hidden" name="parent_id" />
										</div>
										<div class="form-group">
											<label class="col-md-2 control-label required">部门类型：</label>
											<div class="col-md-10 field">
												<select name="type" class="basic-single form-control">
													<option value="1">缺省</option>
												</select>
											</div>
										</div>
										<div class="form-group">
											<label class="col-md-2 control-label required">部门名称：</label>
											<div class="col-md-10 field">
												<input type="text" name="name" class="form-control" />
											</div>
										</div>
										<div class="form-group">
											<label class="col-md-2 control-label required">是否展开：</label>
											<div class="col-md-10 field">
												<select name="is_expanded" class="basic-single form-control">
													<option value="1" selected="selected">是</option>
													<option value="0">否</option>
												</select>
											</div>
										</div>
										<div class="form-group">
											<label class="col-md-2 control-label">扩展码：</label>
											<div class="col-md-10 field">
												<input class="form-control" type="text" name="biz_code" />
											</div>
										</div>
										<div class="form-group">
											<label class="col-md-2 control-label">扩展JSON：</label>
											<div class="col-md-10 field">
												<textarea name="ext" class="form-control textarea-grow" rows="4"></textarea>
											</div>
										</div>
										<div class="form-group">
											<label class="col-md-2 control-label">备注：</label>
											<div class="col-md-10 field">
												<textarea name="remark" class="form-control textarea-grow" rows="4"></textarea>
											</div>
										</div>
									</form>
								</div>
								<div class="modal-footer">
									<button type="submit" form="fo-new" class="btn btn-sm btn-success btn-gradient">保存</button>
									<button type="button" class="btn btn-sm btn-danger btn-gradient" data-dismiss="modal">关闭</button>
								</div>
							</div>
							<!-- /.modal-content -->
						</div>
						<!-- /.modal-dialog -->
					</div>
					<!-- /.modal -->

					<!-- 修改窗口 -->
					<div class="modal fade" id="w-update" tabindex="-1" data-backdrop="static">
						<div class="modal-dialog w650">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-label="Close">
										<span aria-hidden="true">&times;</span>
									</button>
									<h3 class="modal-title">修改部门</h3>
								</div>
								<div class="modal-body">
									<form id="fo-update" class="form-horizontal">
										<input type="hidden" name="id" />
										<div class="form-group">
										     <!-- //TODO 后续版本支持修改上级部门 -->
											<label class="col-md-2 control-label required">上级部门：</label>
											<div class="col-md-10 field">
												<input class="form-control" type="text" name="parent_name" readonly="readonly" />
											</div>
											<input type="hidden" name="parent_id" />
										</div>
										<div class="form-group">
											<label class="col-md-2 control-label required">部门类型：</label>
											<div class="col-md-10 field">
												<select name="type" class="basic-single form-control">
													<option value="1">缺省</option>
												</select>
											</div>
										</div>
										<div class="form-group">
											<label class="col-md-2 control-label required">部门名称：</label>
											<div class="col-md-10 field">
												<input type="text" name="name" class="form-control" />
											</div>
										</div>
										<div class="form-group">
											<label class="col-md-2 control-label required">是否展开：</label>
											<div class="col-md-10 field">
												<select name="is_expanded" class="basic-single form-control">
													<option value="1" selected="selected">是</option>
													<option value="0">否</option>
												</select>
											</div>
										</div>
										<div class="form-group">
											<label class="col-md-2 control-label">扩展码：</label>
											<div class="col-md-10 field">
												<input class="form-control" type="text" name="biz_code" />
											</div>
										</div>
										<div class="form-group">
											<label class="col-md-2 control-label">扩展JSON：</label>
											<div class="col-md-10 field">
												<textarea name="ext" class="form-control textarea-grow" rows="4"></textarea>
											</div>
										</div>
										<div class="form-group">
											<label class="col-md-2 control-label">备注：</label>
											<div class="col-md-10 field">
												<textarea name="remark" class="form-control textarea-grow" rows="4"></textarea>
											</div>
										</div>
									</form>
								</div>
								<div class="modal-footer">
									<button type="submit" form="fo-update" class="btn btn-sm btn-success btn-gradient">保存</button>
									<button type="button" class="btn btn-sm btn-danger btn-gradient" data-dismiss="modal">关闭</button>
								</div>
							</div>
							<!-- /.modal-content -->
						</div>
						<!-- /.modal-dialog -->
					</div>
					<!-- /.modal -->


				</div>

			</section>
			<!-- End: 业务办理区 -->

			<!--/* 页脚 */-->
			<footer th:replace="fragments/footer"></footer>

		</section>
		<!-- End: Content-Wrapper -->

	</div>
	<!-- End: 主页面 -->

	<!--/* 公共脚本文件 */-->
	<th:block th:include="fragments/scripts" />
	<script src="/theme/vendor/plugins/ztree/js/jquery.ztree.all.min.js"></script>

	<script th:inline="javascript">
		/*<![CDATA[*/
		$(function() {
			"use strict";
			Core.init();
			My.init();
			/******* 事件监听.start ********/
			$("#btn-query").on("click", fnQuery);
			$("#btn-new").on("click", fnOpenNew);
			$('#dt-org').on('init.dt', fnQuery);
			$("#btn-refresh").on("click", fnRefresh);
			$("#btn-t-refresh").on("click", fnRefresh);
			$("#btn-t-expand").on("click", fnToggleTree);
            $('#dt-org tbody').on('click', 'tr', function() {
                if ($(this).hasClass('selected')) {
                          $(this).removeClass('selected');
                } else {
                          var table = $('#dt-org').DataTable();
                          table.$('tr.selected').removeClass('selected');
                          $(this).addClass('selected');
                }
             });
			$('#dt-org tbody').on('dblclick', 'tr', function() {
				fnShowUpdate($('#dt-org').DataTable().row(this).data());
			});
			/******* 事件监听.end ********/

			//初始化部门树
			loadTree();

			//初始化下拉框
			$(".basic-single").select2({
				placeholder : "请选择...",
				width : '100%',
				minimumResultsForSearch : -1, //隐藏搜索框
				allowClear : true
			});

			//初始化表格
			$('#dt-org')
					.dataTable(
							{
								dom : 'tr<"dt-panelfooter clearfix"lip>',
								pageLength : 20,
								lengthMenu : [ [ 10, 20, 50, 200, 500 ], [ 10, 20, 50, 200, 500 ] ],
								//autoWidth: false,
								ordering : false,
								processing : true,
								serverSide : true, //false：一次查询，客户端分页的模式；true：服务端分页模式
								deferLoading : 0, //屏蔽初始化后自动加载数据
								pagingType : "full_numbers",
								columns : [
										{
											data : "id",
											width : 60
										},
										{
											data : "name",
											width : 200
										},
										{
											data : "parent_name",
											width : 200
										},
										{
											data : "type",
											render : function(data, type, row, meta) {
												switch (row.type) {
												case '1':
													return '缺省';
												default:
													return row.type
												}
											},
											width : 100
										},
										{
											data : "biz_code",
											width : 200
										},
										{
											width : 80,
											render : function(data, type, row, meta) {
												var html = "<div class='text-right text-nowrap'><button class='btn btn-success btn-xs btn-gradient mr5' onclick='fnShowUpdate("
														+ JSON.stringify(row) + ")'>修改</button>";
												html += "<button class='btn btn-danger btn-xs btn-gradient' onclick='fnDelete("
														+ JSON.stringify(row) + ")'>删除</button></div>";
												return html;
											}
										} ],
								columnDefs : [ {
									"defaultContent" : "",
									"targets" : "_all"
								} ],
							});

			//表单校验规则
			var validateOptions = {
				//校验规则
				rules : {
					parent_name : {
						required : true
					},
					name : {
						required : true
					},
					is_expanded : {
						required : true
					},
					type : {
						required : true
					}
				},
				//提示信息
				messages : {
					parent_name : {
						required : '上级部门不能为空'
					},
					name : {
						required : '请输入部门名称'
					},
					is_expanded : {
						required : '请选择是否展开'
					},
					type : {
						required : '请选择部门类型'
					}
				}
			}

			//绑定表单校验和提交响应事件
			My.validate('#fo-new', fnNew, validateOptions);
			My.validate('#fo-update', fnUpdate, validateOptions);

			//收缩或展开树
			function fnToggleTree() {
				var treeObj = $.fn.zTree.getZTreeObj("tree");
				var nodes = treeObj.getNodes();
				if (nodes.length > 0) {
					if (nodes[0].open) {
						treeObj.expandAll(false);
					} else {
						treeObj.expandAll(true);
					}
				}
			}

		}); /* end onReady */

		//刷新
		function fnRefresh() {
			loadTree();
			setTimeout(function() {
				fnQuery();
			}, 200);
		}

		//加载树
		function loadTree() {
			var setting = {
				view : {
					showLine : false,
					selectedMulti : false
				},
				data : {
					simpleData : {
						enable : true
					}
				},
				callback : {
					onClick : fnQuery
				}
			};
			$.ajax({
				type : 'post',
				url : 'listOrgTree',
				success : function(data) {
					var tree = $.fn.zTree.init($("#tree"), setting, data);
					tree.expandAll(true);
				}
			});
		}

		//查询列表
		function fnQuery() {
			var data = {};
			data.name = $("#in-name").val();
			var treeObj = $.fn.zTree.getZTreeObj("tree");
			if (treeObj) {
				var nodes = treeObj.getSelectedNodes();
				if (nodes.length > 0) {
					data.parent_id = nodes[0].id;
				}
			}
			var ajax = {
				url : "list",
				type : "POST",
				data : data
			}
			$('#dt-org').DataTable().settings()[0].ajax = ajax;
			$('#dt-org').DataTable().ajax.reload();
		}
		
		//弹出修改窗口
		function fnShowUpdate(row) {
			$.ajax({
				type : 'post',
				url : 'get',
				data : row,
				success : function(data) {
					data.parent_name = row.parent_name == null ? "无" : row.parent_name;
					$('#w-update').modal();
					$("#fo-update")[0].reset();
					$("#fo-update").setForm(data);
				}
			});
		}
		
		//保存更新
		function fnUpdate() {
			$.ajax({
				type : 'post',
				url : 'update',
				data : My.params('#fo-update'),
				success : function(data) {
					if (data.code == '1') {
						My.alert(data.msg);
						$('#w-update').modal('hide');
						fnQuery();
					} else {
						My.alert(data.msg);
					}
				}
			});
		}

		//打开新增窗口
		function fnOpenNew(e) {
			$('#w-new').modal();
			$("#fo-new")[0].reset();
			var treeObj = $.fn.zTree.getZTreeObj("tree");
			var nodes = treeObj.getSelectedNodes();
			if (nodes.length == 0) {
				var all = treeObj.getNodes();
				if (all.length > 0) {
					treeObj.selectNode(all[0]);
					fnQuery();
				}
			}
			nodes = treeObj.getSelectedNodes();
			if (nodes.length > 0) {
				$("#fo-new [name='parent_name']").val(nodes[0].name);
				$("#fo-new [name='parent_id']").val(nodes[0].id);
			}

		}

		//保存
		function fnNew() {
			$.ajax({
				type : 'post',
				url : 'save',
				data : My.params('#fo-new'),
				success : function(data) {
					if (data.code == '1') {
						My.alert(data.msg);
						$('#w-new').modal('hide');
						$('#dt-org').DataTable().ajax.reload();
						loadTree();
					} else {
						My.alert(data.msg);
					}
				}
			});
		}

		//删除
		function fnDelete(row) {
			My.confirm('确认删除当前部门吗？', 'small', function(result) {
				if (result) {
					$.ajax({
						type : 'post',
						url : 'delete',
						data : row,
						success : function(data) {
							if (data.code == '1') {
								My.alert(data.msg);
								loadTree();
								$('#dt-org').DataTable().ajax.reload();
							} else {
								My.alert(data.msg);
							}
						}
					});
				}
			});
		}

		/*]]>*/
	</script>

</body>

</html>